import * as echarts from "echarts";
/**
 *  LH-DDS电表每日用电量柱状图
 * @type {{option: (function(): {yAxis: {name: string, type: string}, xAxis: {axisLabel: {rotate: number}, data, show: boolean, name: string, type: string}, color: string[], grid: {top: string, left: string, bottom: string, right: string, containLabel: boolean}, series: [{barWidth: string, data, name: string, itemStyle: {normal: {label: {show: boolean, position: string, textStyle: {color: string, fontSize: number}}}}, type: string}], tooltip: {show: boolean}})}}
 */
export const lhddsMonthUsedBarChart = {
  option: function () {
    return {
      backgroundColor: "#00265f",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "15%",
        right: "3%",
        left: "5%",
        bottom: "12%",
      },
      xAxis: [
        {
          type: "category",
          data: [
            "2025-10-01",
            "2025-10-02",
            "2025-10-03",
            "2025-10-04",
            "2025-10-05",
            "2025-10-06",
            "2025-10-07",
            "2025-10-08",
            "2025-10-09",
            "2025-10-10",
            "2025-10-11",
            "2025-10-12",
            "2025-10-13",
            "2025-10-14",
            "2025-10-15",
            "2025-10-16",
            "2025-10-17",
            "2025-10-18",
            "2025-10-19",
            "2025-10-20",
            "2025-10-21",
            "2025-10-22",
            "2025-10-23",
            "2025-10-24",
            "2025-10-25",
            "2025-10-26",
            "2025-10-27",
            "2025-10-28",
            "2025-10-29",
            "2025-10-30",
            "2025-10-31"
          ],
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.12)",
            },
          },
          axisLabel: {
            margin: 10,
            color: "#e2e9ff",
            textStyle: {
              fontSize: 14,
            },
          },
        },
      ],
      yAxis: [
        {
          name: "",
          axisLabel: {
            formatter: "{value}",
            color: "#e2e9ff",
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,1)",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.12)",
            },
          },
        },
      ],
      series: [
        {
          type: "bar",
          data: [500, 2600, 1300, 1300, 1250, 200,1500,1500,100,1500,300,600,1500,800,1500,150,660,780,990,1500,556,1250,756,890,456,789,225,330,555,1125,778],
          barWidth: "10px",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,244,255,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,77,167,1)", // 100% 处的颜色
                  },
                ],
                false
              ),
              barBorderRadius: [30, 30, 30, 30],
              shadowColor: "rgba(0,160,221,1)",
              shadowBlur: 4,
            },
          },
          label: {
            normal: {
              show: false,
              lineHeight: 30,
              width: 80,
              height: 30,
              backgroundColor: "rgba(0,160,221,0.1)",
              borderRadius: 200,
              position: ["-8", "-60"],
              distance: 1,
              formatter: ["    {d|●}", " {a|{c}}     \n", "    {b|}"].join(","),
              rich: {
                d: {
                  color: "#3CDDCF",
                },
                a: {
                  color: "#fff",
                  align: "center",
                },
                b: {
                  width: 1,
                  height: 30,
                  borderWidth: 1,
                  borderColor: "#234e6c",
                  align: "left",
                },
              },
            },
          },
        },
      ],
    };
  },
};
var yAxisData = [
  "维护时间预警",
  "车辆超期预警",
  "超范围维修预警",
  "证书超期或不全",
];
export const warningChart = {
  option: function () {
    return {
      backgroundColor: "#0f375f",
      tooltip: {
        formatter: "{b} ({c})",
      },
      xAxis: [
        {
          gridIndex: 0,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          gridIndex: 0,
          interval: 0,
          data: yAxisData.reverse(),
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: "8px",
              color: "#36a8fa",
            },
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          type: "bar",
          xAxisIndex: 0,
          yAxisIndex: 0,
          barWidth: "45%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "rgba(41,134,207,1)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0,255,205,.9)",
                  },
                ],
                false
              ),
            },
          },
          label: {
            normal: {
              show: true,
              position: "right",
              textStyle: {
                color: "#00FFCD",
              },
            },
          },
          data: ["135", "764", "692", "834"],
        },
      ],
    };
  },
};


let bgColor = "#fff";
let title = "总量";
let color = ["#0E7CE2", "#FF8352", "#E271DE", "#F8456B", "#00FFFF", "#4AEAB0"];
let echartData = [
  {
    name: "A类",
    value: "3720",
  },
  {
    name: "B类",
    value: "2920",
  },
  {
    name: "C类",
    value: "2200",
  },
  {
    name: "D类",
    value: "1420",
  },
];

let formatNumber = function (num) {
  let reg = /(?=(\B)(\d{3})+$)/g;
  return num.toString().replace(reg, ",");
};
let total = echartData.reduce((a, b) => {
  return a + b.value * 1;
}, 0);

export const bingChart = {
  option: function () {
    return {
      backgroundColor: bgColor,
      color: color,
      // tooltip: {
      //     trigger: 'item'
      // },
      title: [
        {
          text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              name: {
                fontSize: 14,
                fontWeight: "normal",
                color: "#666666",
                padding: [10, 0],
              },
              val: {
                fontSize: 32,
                fontWeight: "bold",
                color: "#333333",
              },
            },
          },
        },
        {
          text: "单位：个",
          top: 20,
          left: 20,
          textStyle: {
            fontSize: 14,
            color: "#666666",
            fontWeight: 400,
          },
        },
      ],
      series: [
        {
          type: "pie",
          radius: ["45%", "60%"],
          center: ["50%", "50%"],
          data: echartData,
          hoverAnimation: false,
          itemStyle: {
            normal: {
              borderColor: bgColor,
              borderWidth: 2,
            },
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 120,
              lineStyle: {
                color: "#e6e6e6",
              },
            },
          },
          label: {
            normal: {
              formatter: (params) => {
                return (
                  "{icon|●}{name|" +
                  params.name +
                  "}{value|" +
                  formatNumber(params.value) +
                  "}"
                );
              },
              padding: [0, -100, 25, -100],
              rich: {
                icon: {
                  fontSize: 16,
                },
                name: {
                  fontSize: 14,
                  padding: [0, 10, 0, 4],
                  color: "#666666",
                },
                value: {
                  fontSize: 18,
                  fontWeight: "bold",
                  color: "#333333",
                },
              },
            },
          },
        },
      ],
    };
  },
};
